<template>
  <div class="c-title">
    <div class="flex ">
      <div class="ct-l">
        <img src="@/assets/img/consult/title.png" alt="" srcset="" />
        <p>{{ info.title }}</p>
      </div>
      <div class="ct-r flex-auto">
        <p class="more" @click="getMore">更多 >></p>
        <div class="flex">
          <p class="ctr-l"></p>
          <p class="ctr-c flex-auto"></p>
          <p class="ctr-r"></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          title: "",
          type: "",
        };
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    getMore() {
      this.$Bus.$emit("gotoMore", this.info);
    },
  },
};
</script>
<style lang="scss" scoped>
.c-title {
  .flex {
    display: flex;
  }
  .flex-auto {
    flex: 1;
  }
  .ct-l {
    position: relative;
    width: 140px;
    img {
      position: absolute;
      width: 140px;
      top: 0;
      left: 0;
    }
    p {
      width: 160px;
      text-align: center;
      line-height: 43px;
    }
  }
  .ct-r {
    .more {
      text-align: right;
      margin-right: 20px;
      margin-top: 6px;
      cursor: pointer;
      &:hover {
        color: $mainColor;
      }
    }
    .ctr-l {
      width: 8px;
      height: 8px;
      border: 1px solid $mainColor;
      transform: rotate(45deg);
    }
    .ctr-c {
      margin-top: 4px;
      border-top: 1px dashed $mainColor;
    }
    .ctr-r {
      width: 8px;
      height: 8px;
      background-color: $mainColor;
      transform: rotate(45deg);
    }
  }
}
</style>
